<template>
  <div>
    <el-drawer :title="title" :visible.sync="showConfig"
               :modal-append-to-body="false"
               :close-on-press-escape="false"
               :size="'600px'"
               @close="cancel()"
               direction="rtl" :modal="false" destroy-on-close custom-class="demo-drawer">
      <div class="demo-drawer__content" v-if="detailData">
        <el-form ref="form">
          <div class="demo-drawer__content-detail">
            <div class="line-box">
              <p class="line-title"></p>
              <p class="line-name"></p>
            </div>
            <div class="line-box">
              <p class="line-title">合同</p>
              <p class="line-name"> {{ project?project.name:'' }}</p>
            </div>
            <div class="line-box">
              <p class="line-title">甲方</p>
              <p class="line-name"> {{ user_list ? user_list.name : '' }}</p>
            </div>
            <div class="line-box">
              <p class="line-title">合同总金额</p>
              <p class="line-name"> ¥{{ project?project.contractMoney:0 }}</p>
            </div>
            <div class="line-box">
              <p class="line-title">开票金额</p>
              <p class="line-name"> ¥{{ `${detailData.money}` }}</p>
            </div>
            <div class="line-box">
              <p class="line-title">创建时间</p>
              <p class="line-name">{{ detailData.createTime }}</p>
            </div>
          </div>
          <detailLog :logList="logList" :userLog="userLog"></detailLog>
        </el-form>
        <div class="demo-drawer__footer">
          <div class="demo-drawer__footer-btn" @click="deletApply()" v-if="type!=='examine' && detailData.status == 0">
            <span class="el-icon-delete"></span>
            <p>撤销</p>
          </div>
          <div class="demo-drawer__footer-btn" @click="examineFn(1)" v-if="type=='examine' && isExamine">
            <span class="el-icon-folder-checked"></span>
            <p>通过</p>
          </div>
          <div class="demo-drawer__footer-btn" @click="examineFn(2)" v-if="type=='examine' && isExamine">
            <span class="el-icon-folder-delete"></span>
            <p>驳回</p>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {overtimeGet, overtimeDel} from "@/api/system/leave"
import detailLog from "@/views/approval/examine/detailLog";
import {getInvoice, delInvoice} from "@/api/system/contract";
import {
  getProject
} from "@/api/system/project";
import {getCustom} from '@/api/system/custom.js'

export default {
  name: "rule",
  props: ['visible', 'paramId', 'isExamine', 'type'],
  components: {detailLog},
  data() {
    return {
      showConfig: false,
      title: '发票详情',
      detailData: null,
      ruleType: {},
      logList: null,
      userLog: null,
      project: null,
      user_list: null
    }
  },
  watch: {
    visible() {
      this.showConfig = this.visible
      if (this.visible) {
        this.getDetail()
      } else {
        this.detailData = null
        this.ruleType = {}
      }
    }
  },
  created() {
  },
  methods: {
    getDetail() {
      getInvoice(this.paramId).then(res => {
        // let time_ = this.$conversionTime(res.data.detail.startTime,res.data.detail.endTime)
        // this.hours = time_.minutes
        this.userLog = this.$deepCopy(res.data.user)
        this.logList = this.$deepCopy(res.data.log)
        this.detailData = res.data.detail // projectId
        this.getProjectFn()
      })
    },
    getProjectFn() {
      getProject(this.detailData.projectId).then(res => {
        this.project = res.data.detail
        this.getUserDetail()
      })
    },
    // 查询客户信息
    // 客户详情
    getUserDetail() {
      getCustom(this.project.customId).then(res => {
        this.user_list = {
          id: Number(res.data.id),
          name: res.data.name
        }
      })
    },
    submitline() {
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    deletApply() {
      let n = this
      this.$modal.confirm('你确定要删除申请, 是否继续?').then(function () {
        return delInvoice(n.invoiveId);
      }).then(() => {
        this.cancel();
        this.$emit('getList')
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    examineFn(option) {
      this.$emit('getExamineFn', option)
    }
  }
}
</script>

<style scoped>
.demo-drawer__content {
  display: flex;
  flex-direction: column;
  background: #f2f4f6;
}

.demo-drawer__content form {
  flex: 1;
}

.demo-drawer__content-detail {
  background: #fff;
  padding: 20px;
}

.demo-drawer__content-detail p {
  margin: 0;
}

.demo-drawer__content-detail p.line-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.demo-drawer__content-detail p.line-name {
  font-size: 14px;
  margin-bottom: 20px;
}

.demo-drawer__content-detail .line-box {
  margin-bottom: 20px;
}

.demo-drawer__content-detail .line-box:last-child {
  margin-bottom: 0;
}

.demo-drawer__content .demo-drawer__footer {
  box-shadow: 0 0 6px #acacac;
  padding: 5px 20px;
  background: #f2f2f6;
}

.demo-drawer__footer-btn {
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.demo-drawer__footer-btn span {
  font-size: 18px;
}

.demo-drawer__footer-btn p {
  margin: 0;
  font-size: 10px;
}
</style>
